<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">设置支付密码</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>

		<view v-show="showTitle" class="content">
			<view class="title">
				<p class="two">请输入支付密码</p>
			</view>
			<u-code-input v-model="value" mode="box" dot :class="`codeInput`" borderColor="#ccc"></u-code-input>

			<view @tap="firstInput()" class="btn">
				确定
			</view>

		</view>

		<view v-show="!showTitle" class="content">
			<view class="title">
				<p class="two">请再次输入支付密码</p>
			</view>
			<u-code-input v-model="enterAgain" mode="box" dot :class="`codeInput`" borderColor="#ccc"></u-code-input>

			<view @tap="enterPasswordAgain" class="btn">
				确定
			</view>

		</view>

		<!-- 实名成功 -->
		<!-- openAccountShow -->
		<u-popup :show="openAccountShow" mode="center" @close="closePay">
			<view class="openAccountBox">
				<view class="title">密码设置成功</view>
				<view class="bottom_btn">
					<view class="btn_item line" @tap="backHome">确定</view>
					<!-- <view class="btn_item" @tap="back">去绑卡</view> -->
				</view>
			</view>
		</u-popup>

		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		saveAccountPassword
	} from '../../api/user.js'
	export default {
		data() {
			return {
				showTitle: true,
				value: '',
				enterAgain: '',
				openAccountShow: false,
			}
		},
		methods: {
			viewWallet() {
				uni.redirectTo({
					url: '/pages/setting/bindBankCard'
				})
			},
			async enterPasswordAgain() {
				if (this.enterAgain == '') {
					this.$u.toast('请输入6位数操作密码')
					return;
				}
				if (this.enterAgain.length != 6) {
					this.$u.toast('请输入完成的6位支付密码')
					return;
				}
				if (this.value == this.enterAgain) {
					this.$refs.min_loading.close()
					// let RSAcode = await getPublicKey()
					// RSA 加密
					// let encryptor = new JSEncrypt() // 创建加密对象实例
					// encryptor.setPublicKey(RSAcode.data.obj) // 设置公钥
					let res = await saveAccountPassword({
						accountPassword: this.hrymd5.md5(this.value),
						confirmAccountPassword: this.hrymd5.md5(this.enterAgain),
					})
					if (res.data.success) {
						this.$u.toast(res.data.msg)
						this.openAccountShow = true
					} else {
						this.$u.toast(res.data.msg)
					}
					this.$refs.min_loading.close()
				} else {
					this.$u.toast('两次密码输入不一致，请重试')
				}
			},
			firstInput() {
				if (this.value == '') {
					this.$u.toast('请输入6位数操作密码')
					return;
				}
				if (this.value.length != 6) {
					this.$u.toast('请输入完成的6位支付密码')
					return;
				}
				if (this.value.length == 6) {
					this.showTitle = false
					this.$u.toast('请再次输入支付密码')
				}
			},
			closePay() {
				this.openAccountShow = false
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			backHome() {
				uni.switchTab({
					url: '/pages/transaction/index',
					// url: '/pages/index/home',
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #fff;
		height: 100vh;
	}

	.con-box {
		background-color: #fff;
		height: 100vh;
		/* #ifdef APP-PLUS */
		padding-top: 150upx;
		/* #endif */
		/* #ifdef H5 */
		padding-top: 140upx;
		/* #endif */
		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
			}
		}

		.content {

			.title {
				text-align: center;

				.one {
					font-size: 45upx;
					font-family: SourceHanSansCN;
					font-weight: 500;
					color: #000;
					margin-bottom: 19upx;
				}

				.two {
					font-size: 33upx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #000;
				}
			}

			.codeInput {
				margin-top: 150upx;
				margin-bottom: 100upx;
				justify-content: center;

				/deep/ .u-code-input__item {
					background-color: #ccc;
					border-radius: 10upx;
					width: 59upx;
					height: 59upx;
				}

				/deep/ .u-code-input__item__dot {
					background-color: #000;
				}

			}

			.btn {
				width: 90%;
				margin: 0 auto;
				height: 80upx;
				background: #CEA539;
				border-radius: 10upx;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

		}

		/deep/.u-popup__content {
			width: 633upx;
			height: auto;
			background: #fff;
			border-radius: 20upx;
			overflow: hidden;

			.header {
				height: 48upx;
				// background: url('../../static/user/border.png');
				// background-size: 100% 100%;
				text-align: center;
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				margin: 34upx 38upx 0 38upx;
			}

		}

		/deep/.u-button--info {
			border-color: transparent;
		}

		.openAccountBox {
			background: #FFFFFF;
			text-align: center;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding-top: 50upx;

			.title {
				padding-bottom: 50upx;
			}

			.bottom_btn {
				width: 100%;
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #C09B3A;
				display: flex;
				align-items: center;
				justify-content: center;

				box-shadow: 0px 0px 1px 0px #BCBCBC;

				.btn_item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 88upx;
				}

				.line {
					box-shadow: 1upx 0px 0px 0px #BCBCBC;
				}
			}
		}
	}
</style>
